.MePage {
    background: #FFF;
    min-height: 100vh;

    .topHeader {
        background-image: url("@/assets/images/Home/homeBg.png");
        background-repeat: no-repeat;
        background-size: cover;
        padding: 0 16rem 16rem;

        .headerWrap {
            display: flex;
            flex-direction: row;
            align-items: center;

            .accountInfo {
                margin-left: 10rem;

                :nth-child(1) {
                    color: #343C4B;
                    font-family: Inter;
                    font-size: 16rem;
                    font-style: normal;
                    font-weight: 500;
                    display: flex;
                    align-items: center;

                    p {
                        color: #FF2D55;
                    }
                }

                .balance {
                    margin-top: 5rem;

                    &>svg {
                        margin-left: 10rem;
                    }

                    .rotate {
                        animation: loading 0.5s linear infinite;
                    }

                    @keyframes loading {
                        0% {
                            transform: rotate(0deg);
                        }

                        100% {
                            transform: rotate(360deg);
                        }
                    }
                }

                :nth-child(2) {
                    color: #343C4B;
                    font-family: Inter;
                    font-size: 16rem;
                    font-style: normal;
                    font-weight: 500;
                    display: flex;
                    align-items: center;

                    p {
                        color: #FF2D55;
                        margin-right: 5rem;
                    }
                }
            }
        }

        .tabOpt {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin-top: 16rem;

            .tabItem {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-around;
                width: 165rem;
                height: 60rem;
                border-radius: 10rem;
                border: 1rem solid transparent;
                font-size: 16rem;

                &>div {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    svg {
                        margin-left: 8rem;
                    }
                }

                &.left {
                    border-color: #FFBDBD;
                    background: linear-gradient(270deg, #FFD6D6 0%, #FFF3F3 100%);
                    color: #FF2D55;
                }

                &.right {
                    border-color: #FFD398;
                    background: linear-gradient(270deg, #FFDCAD 0%, #FFF0DD 100%);
                    color: #FF7A00;
                }

                &>img {
                    width: 48rem;
                    height: 48rem;
                }
            }
        }
    }

    .notLogIn {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 22px;
        background: #FF2D55;
        color: #FFF;
        text-align: center;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: 16px;
        width: 92%;
        height: 44px;
        margin: 0 auto 16rem;
    }

    .blackBg {
        background: #F1F5F9;
        height: 16rem;
    }

    .accountData {
        .accountItem {
            margin-top: 28rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16rem;

            .leftAccount {
                display: flex;
                align-items: center;

                &>div {
                    color: #343C4B;
                    font-family: Inter;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 16px;
                    margin-left: 8rem;
                }
            }

            .rightData {
                display: flex;
                align-items: center;
                color: #A8AEB9;
                font-family: Inter;
                font-size: 14px;
                font-style: normal;
                font-weight: 500;
                line-height: 16px;

                &>div {
                    margin-right: 12rem;
                }
            }
        }
    }

    .logout {
        border-radius: 22px;
        background: #D1D5DB;
        text-align: center;
        width: 343px;
        line-height: 44rem;
        margin: 110rem auto 0rem;
        color: #343C4B;
        text-align: center;
        font-family: Inter;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
    }
}